<template>
  <div>
    <!-- 图书分类表格 -->
    <el-table
      size="max"
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="classificationId"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column
        prop="classificationName"
        label="图书分类"
        sortable
        width="300"
      >
      </el-table-column>
      <el-table-column
        prop="superiorId"
        label="上级id"
        sortable
        width="300"
      ></el-table-column>
      <el-table-column prop="classGrade" label="分类级别" sortable width="300">
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <el-button
            type="success"
            size="mini"
            icon="el-icon-plus"
            @click="addById(scope.row.classificationId)"
            title="添加"
            :disabled="scope.row.superiorId==0?false:true"
          ></el-button>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="editById(scope.row.classificationId)"
            title="编辑"
          ></el-button>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="removeById(scope.row.classificationId)"
            title="删除"
          ></el-button>
        </template>
      </el-table-column>
      <!-- 修改 删除 添加 搜索 -->
    </el-table>

    <!-- 弹出框 -->
    <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%">
      <el-form
        ref="dataForm"
        label-width="150px"
        size="small"
        style="padding-right: 40px"
      >
        <el-form-item label="图书分类">
          <el-input v-model="showData.classificationName" />
        </el-form-item>
        <el-form-item label="上级id">
          <el-input v-model="showData.superiorId" />
        </el-form-item>
        <el-form-item label="分类级别">
          <!-- <el-input v-model="showData.classGrade"> -->
            <el-select
              v-model="showData.classGrade"
              placeholder="请选择"
            >
              <el-option label="一级分类" value="一级分类"></el-option>
              <el-option label="二级分类" value="二级分类"></el-option>
            </el-select>
          <!-- </el-input> -->
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="dialogVisible = false"
          size="small"
          icon="el-icon-refresh-right"
          >取 消</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-check"
          @click="saveOrUpdate()"
          size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
// 点击删除删除当前的分类, 点击删除的时候需要把子节点的id查询出来, 给[], 传回后端
// 添加
import api from "@/api/category";
export default {
  created() {
    this.getTreeNodesAll();
  },
  data() {
    return {
      idList: [],
      dialogVisible: false,
      tableData: [
        {
          classificationId: 1,
          superiorId: 1,
          classificationName: "线状古籍/民国旧书",
          classGrade: "一级分类",
          address: "上海市普陀区金沙江路 1518 弄",
          children: [
            {
              classificationId: 2,
              superiorId: 31,
              classificationName: "线状古籍",
              classGrade: "二级分类",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              classificationId: 3,
              superiorId: 32,
              classificationName: "民国旧书",
              classGrade: "二级分类",
              address: "上海市普陀区金沙江路 1519 弄",
            },
          ],
        },
        {
          classificationId: 4,
          superiorId: 2,
          classificationName: "期刊/报纸/外文古籍",
          classGrade: "一级分类",
          address: "上海市普陀区金沙江路 1517 弄",
          children: [
            {
              classificationId: 5,
              superiorId: 33,
              classificationName: "期刊",
              classGrade: "二级分类",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              classificationId: 6,
              superiorId: 34,
              classificationName: "报纸",
              classGrade: "二级分类",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              classificationId: 7,
              superiorId: 35,
              classificationName: "外文古籍",
              classGrade: "二级分类",
              address: "上海市普陀区金沙江路 1519 弄",
            },
          ],
        },
      ],
      showData: {}, // 点击修改按钮回显展示的数据
    };
  },
  methods: {
    getTreeNodesAll() {
      /* this.getTreeNodes(); */
      api.getTreeNodesAll().then(
        (response) => {
          this.tableData = response.data.data;
        },
        (error) => {}
      );
    },
    /* 此接口废弃 */
    getTreeNodes(courseId = 1) {
      api.getTreeNodes(courseId).then(
        (response) => {
          this.tableData = response.data.data;
          // console.log(response);
          // console.log(this.tableData);
          // console.log(response.data);
        },
        (error) => {}
      );
    },
    editById(classificationId) {
      this.dialogVisible = true;
      api.getTreeNodes(classificationId).then((response) => {
        this.showData = response.data.data[0];
      });
    },
    removeById(classificationId) {
      // 点击删除, 查出当前节点classificationId, 及其子节点的classificationId
      console.log(classificationId);
      this.idList = [classificationId];
      this.$confirm("此操作将永久删除图书分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.batchRemove(this.idList).then(
            (response) => {
              this.getTreeNodesAll();
              this.$message({
                type: "success",
                message: "删除成功",
              });
              this.getTreeNodesAll();
            },
            (error) => {}
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    addById(classificationId) {
      this.dialogVisible = true;
      this.showData = {
        'superiorId': classificationId
      };
    },
    saveOrUpdate() {
      if (!this.showData.classificationId) {
        this.save();
      } else {
        this.update();
      }
    },
    //添加
    save() {
      api.save(this.showData).then((response) => {
        this.$message({
          type: "success",
          message: "添加成功",
        });
        this.dialogVisible = false;
        this.getTreeNodesAll();
      });
    },
    //更新
    update() {
      api.updateById(this.showData).then((response) => {
        this.$message({
          type: "success",
          message: "更新成功",
        });
        this.dialogVisible = false;
        this.getTreeNodesAll();
      });
    },
  },
};
</script>
